<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

  <head>

    <title>CanvasXpress - Documentation</title>

    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta http-equiv="CACHE-CONTROL" CONTENT="NO-CACHE">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="canvasxpress, canvas, html5, graph, chart, plot, javascript, javascript library, genomic, scientific, android, animation, bar graph, line graph, dotplot, boxplot, heatmap, newick, scatter, 3d, pie, correlation, venn, network, market, candlestick, genome browser, isaac neuhaus"/>
    <meta name="description" content=""/>
    <meta http-equiv="Content-Language" content="en-us" />
    <meta name="Rating" content="general" />
    <meta name="googlebot" content="index,follow" />
    <meta name="robots" content="index,follow" />
    <meta name="author" content="Isaac Neuhaus" />
    <meta name="google-site-verification" content="UmQp3wIY7r9cDwr5LRdUDeDkpxAxg0Lv5tUc3tW9-90" />

    <link rel="stylesheet" href="./css/global.css" type="text/css"/>
    <style type="text/css">
      table.example {margin: 10px; border-collapse: collapse;}
      td.example {vertical-align: top;}
      div br {clear: both;}
      div.code, div.json, div.pre {font-size: medium; clear: both;}
      div.desc {font-size: small;}
      div.h3 {font-size: 150%}
      div.h4 {font-size: 120%}
      table.config {font-size: small; border-collapse: collapse; margin: 10px; width: 800px;}
      td.first-col {border: 1px solid #000000; padding: 4px; width: 35%; vertical-align: top;}
      td.sec-col {border: 1px solid #1D222B; padding: 4px; width: 65%; vertical-align: top;}
      tr.private {background-color: #EEEEEE;}
      tr.public {background-color: #FFFFFF;}
      span.light {font-size: small; color: #777777; font-style: italic;}
      caption {background-color:  #DDDDDD; border-top: 1px solid #1D222B;  border-right: 1px solid #1D222B;  border-left: 1px solid #1D222B; color: #FFFFFF: font-size: 150%; padding: 2px 6px; text-align: left;}
      div.canvas {margin: 10px;}
    </style>

    <!--[if IE]><script type="text/javascript" src="./js/excanvas.js"></script><![endif]-->
    <!--[if IE]><script type="text/javascript" src="./js/extext.js"></script><![endif]-->
    <script type="text/javascript" src="./js/canvasXpress.min.js"></script>

    <script>
      var showDemo = function () {
        new CanvasXpress('venn', false, {graphType: 'Venn',
                                         showDataTableOnSelect: false,
                                         showLegend: false,
                                         canvasBox: false,
                                         vennGroups: 4},
                                        {click: function (o){
                                                  alert(CanvasXpress.references[0].prettyJSON(o));
                                                }});
        new CanvasXpress('scatter', false, {showDataTableOnSelect: false,
                                            graphType: 'Scatter3D',
                                            canvasBox: false,
                                            showLegend: false,
                                            xAxisTitle: '',
                                            yAxisTitle: '',
                                            zAxisTitle: ''},
                                           {click: function (o){
                                                     alert(CanvasXpress.references[1].prettyJSON(o));
                                                   }});
        new CanvasXpress('heatmap', false, {showDataTableOnSelect: false,
                                            graphType: 'Heatmap',
                                            canvasBox: false,
                                            showSmpDendrogram: true,
                                            showVarDendrogram: true,
                                            showLegend: false},
                                           {click: function (o){
                                                     alert(CanvasXpress.references[2].prettyJSON(o));
                                                   }});
        new CanvasXpress('network', false, {backgroundType: 'gradient',
                                            backgroundGradient1Color: 'rgb(0,183,217)',
                                            backgroundGradient2Color: 'rgb(4,112,174)',
                                            showDataTableOnSelect: false,
                                            canvasBox: false,
                                            showAnimation: true,
                                            graphType: 'Network'},
                                           {click: function (o){
                                                     alert(CanvasXpress.references[3].prettyJSON(o));
                                                   }});
        new CanvasXpress('genome', false, {graphOrientation: 'vertical',
                                           backgroundType: 'gradient',
                                           backgroundGradient1Color: 'rgb(0,183,217)',
                                           backgroundGradient2Color: 'rgb(4,112,174)',
                                           oddColor: 'rgb(220,220,220)',
                                           evenColor: 'rgb(250,250,250)',
                                           missingDataColor: 'rgb(220,220,220)',
                                           showDataTableOnSelect: false,
                                           featureHeightDefault: 10,
                                           setMin: 1,
                                           setMax: 400,
                                           graphType: 'Genome'},
                                          {click: function (o){
                                                    alert(CanvasXpress.references[4].prettyJSON(o));
                                                  }});
      }
    </script>

  </head>

  <body onload="showDemo();">

    <div class="page">

      <div class="header">

        <a href="./" class="logo">canvasXpress | Javascript Canvas Graphing Library</a>

        <div class="share">
          <a class="addthis_button" href="http://addthis.com/bookmark.php?v=250&amp;username=xa-4c58a3ba2ff9a164">
            <img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/>
          </a>
          <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c58a3ba2ff9a164"></script>
        </div>

        <div class="donate">
          <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
            <input type="hidden" name="cmd" value="_s-xclick">
            <input type="hidden" name="hosted_button_id" value="EVP6CWVNJN7SY">
            <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
            <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
          </form>
        </div>

        <ul class="nav">
          <li ><a href="./">Home</a></li>
          <li ><a href="./about.html">About</a></li>
          <li class="current"><a href="./documentation.html">Documentation</a></li>
          <li ><a href="./bar.html">Examples</a></li>
          <li ><a href="./download.html">Download</a></li>
          <li ><a href="./contact.html">Contact</a></li>
        </ul>

      </div>

      <div class="wrap">

        <div class="content">

          <div id="documentation">

            <h1>Documentation</h1>

            <center>
              <table class="example">
                <tr>
                  <td><canvas id="scatter" width="200" height="200"></canvas></td>
                  <td><canvas id="venn"    width="200" height="200"></canvas></td>
                  <td><canvas id="heatmap" width="200" height="200"></canvas></td>
                  <td><canvas id="network" width="200" height="200"></canvas></td>
                </tr>
                <tr>
                  <td colspan=4><canvas id="genome"  width="810" height="345"></canvas></td>
                </tr>
              </table>
            </center>

            <h2>Browser Support</h2>

            <div class="desc">
              <p>

                It is supposed to work in all major browsers like
                Firefox, Safari, Chrome, Opera and IE. (I have only
                tested the library in Chrome, Firefox and IE). It even
                works in substandard browsers like Internet
                Explorer&nbsp;6 if an additional javascript library,
                <a href="http://code.google.com/p/explorercanvas/"
                target="_blank">ExplorerCanvas</a> is
                included. canvasXpress is slow in IE unless the <a
                href="http://code.google.com/chrome/chromeframe/"
                target="_blank">google frame plugin</a> is
                installed. (Please see below how to automatically
                enable this plugin).  Older versions of many browsers
                (I mean Firefox 1.5, Opera 9, Safari 3.x, Chrome 1.0,
                IE 6) also require additional javascript libraries, <a
                href= "http://code.google.com/p/canvas-text/"
                target="_blank">canvas-text</a> and <a href=
                "http://typeface.neocracy.org/fonts.html"
                target="_blank">typeface.js</a> to support printing of
                text.  (Please see below).

              </p>
            </div>

            <h2>Functionalities</h2>

            <div class="h4">
              <h4><strong>Zooming and Panning</strong></h4>
            </div>

            <div class="desc">
              <p>

                Zooming graphs can be done by dragging the mouse over
                an area while pressing the left mouse button or by
                clicking close to the axis after the axis resizer
                appears. You can adjust the maximum and minimum value
                and / or drag an interval across the range. You can
                select samples by dragging the mouse over the samples
                you want to see while you pressing the left mouse
                button and the 'shift' key. Also, networks and
                haetmaps can be zoom in and out with the help of the
                mouse wheel or with the help.


              </p>

              <p>

                Panning can be done also in networks and heatmaps by
                either dragging the mouse or with the help of the the
                arrow keys.

              </p>
            </div>

            <div class="h4">
              <h4><strong>Selecting data points or nodes</strong></h4>
            </div>

            <div class="desc">
              <p>

                You can select data points in the scatter plots or in
                the networks by simultanously pressing the 'shift' key
                and dragging the mouse over the data points or
                nodes. You can also select individual items by
                simultaneously pressing the 'ctrl' key and clicking
                with the left mouse button on the individual
                item. Once selected, you can press simultaneously the
                'ctrl' and the 'delete' keys to hide them or the
                'ctrl' and the 'insert' keys to show them again. You
                can reset the selecting by pressing the 'esc' key.

              </p>
            </div>

            <div class="h4">
              <h4><strong>Canvas Resizing</strong></h4>
            </div>

            <div class="desc">
              <p>

                You can resize the canvas image using the handle that appears when you
                mouse over the south and east sides of the canvas.

              </p>
            </div>

            <div class="h4">
              <h4><strong>Animations</strong></h4>
            </div>

            <div class="desc">
              <p>

                You can use the arrow keys to rotate the 3D-Scatter
                plot or cycle over the axes in the 2D-Scatter plots
                (including the paging keys too). Of course you have
                to simultaneously press any of those keys and the
                'ctrl' key.

              </p>
            </div>

            <div class="h4">
              <h4><strong>Reseting the canvas</strong></h4>
            </div>

            <div class="desc">
              <p>

                In order to reset the canvas just press the 'esc' key.

              </p>
            </div>

            <div class="h4">
              <h4><strong>Printing the canvas</strong></h4>
            </div>

            <div class="desc">
              <p>

                To print the canvas you need to simultaneously click
                the 'ctrl' and the 'p' keys.

              </p>
            </div>

            <h2>Usage</h2>

            <div class="h3">
              <h3>Javascript Libraries</h3>
            </div>

            <div class="desc">
              <p>

                Please see the javascripts libraries included in any page in
                this site which should look something like:

              </p>
            </div>

            <div class="code">
              <pre>
                &lt;!--[if IE]&gt;&lt;script type="text/javascript" src="./js/excanvas.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
                &lt;!--[if IE]&gt;&lt;script type="text/javascript" src="./js/extext.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
                &lt;script type="text/javascript" src="./js/canvasXpress.min.js"&gt;&lt;/script&gt;
              </pre>
            </div>


            <div class="desc">
              <p>

                As mentioned above canvasXpress is slow in Internet
                Explorer unless the <a
                href="http://code.google.com/chrome/chromeframe/"
                target="_blank">Google Chrome Frame plugin</a> is installed.
                Enabling the plugin is simple. For most web pages, all
                you have to do is add a single tag to your pages and
                detect whether your users have installed Google Chrome
                Frame. Please see the html head included in any page in
                this site which should look something like:

              </p>
            </div>

            <div class="code">
              <pre>
                &lt;meta http-equiv="X-UA-Compatible" content="chrome=1"&gt;
              </pre>
            </div>

            <div class="desc">
              <p>

                The file <a target="_blank"
                href="http://sourceforge.net/projects/canvasxpress/">canvasXpress.min.js</a>
                also contains the additional javascript libraries, <a
                href="http://code.google.com/p/sprintf/"
                target="_blank">sprintf</a> to format numbers, <a
                href="http://typeface.neocracy.org/fonts.html">canvas text
                libraries</a> to support cross-browser displaying of text and <a
                href="http://stevenlevithan.com/assets/misc/date.format.js"
                >date.format</a> to nicely format dates.

              </p>
            </div>

            <div class="h3">
              <h3>How to initialize canvasXpress</h3>
            </div>

            <div class="desc">
              <p>

                Simple ...

              </p>
            </div>

            <div class="code">
              <pre>
                 var cX = new CanvasXpress(target, data, config, events);
              </pre>
            </div>

            <div class="desc">
              <p>

                or

              </p>
            </div>

            <div class="code">
              <pre>
                 var cX = new CanvasXpress({renderTo: target,
                                            data: data,
                                            config: config,
                                            events: events});
              </pre>
            </div>

            <div class="desc">
              <p>

                The function takes either one or four arguments which
                I will explain in detail. Briefly, <a
                href="#target"><b>target</b></a> is the id of the
                element in the DOM tree with the tag name
                &lt;canvas&gt; where the graph will be render to, <a
                href="#data"><b>data</b></a> is a <i>json</i> object
                with the data you want to plot, <a
                href="#config"><b>config</b></a> refers to a
                <i>json</i> object to customize the graph and <a href=
                "#events"><b>events</b></a> is a <i>json</i> object
                with user-defined mouse events. If the function is
                called with a single argument then it must consist of
                an object with the properties <a
                href="#target"><b>renderTo</b></a>, <a
                href="#data"><b>data</b></a>, <a
                href="#config"><b>config</b></a> and <a href=
                "#events"><b>events</b></a> which are in essence the
                same four arguments described above.  So now, let me
                ellaborate some more.

              </p>
            </div>

            <h2>Arguments</h2>

            </div>

            <div class="h4">
              <h4><a name="target" id="target"><strong>target</strong></a></h4>
            </div>

            <div class="desc">
              <p>

                The parameter target is the id of the element in the DOM with
                the tag name &lt;canvas&gt;. If it is undefined, a new element
                is inserted in the document body.

              </p>
            </div>

            <div class="h4">
              <h4><a name="data" id="data"><strong>data</strong></a></h4>
            </div>

            <div class="desc">
              <p>

                A <i>json</i> object with the data you want to plot. There are
                six different data formats. One for the genome browser, one for
                the networks, one for the Venn diagramas, one for the
                correlation plots, one for the stock market data and one for all
                the other graphs.

              </p>
              <p>

                I'll start first with the last one which is used for
                the following graphs: <a href="./bar.html" target="_cX_bar">bar graphs</a>, <a href="./line.html" target="_cX_line">line graphs</a>, <a href="./barline.html" target="_cX_barline">bar-line combination graphs</a>, <a href="./boxplot.html" target="_cX_boxplot">boxplots</a>,
                <a href="./dotplot.html" target="_cX_dotplot">dotplots</a>, <a href="./area.html" target="_cX_area">area graphs</a>, <a href="./stacked.html" target="_cX_stacked">stacked graphs</a>, <a href="./stacked.html" target="_cX_stacked">stacked-line combination graphs</a>, <a href="./stacked.html" target="_cX_stacked">percentage-stacked graphs</a>,
                <a href="./stacked.html" target="_cX_stacked">percentage-stacked-line combination graphs</a>, <a href="./heatmap.html" target="_cX_heatmap">heatmaps</a>, <a href="./heatmap.html" target="_cX_heatmap">heatmaps</a>, <a href="./scatter2d.html" target="_cX_scatter2d">2D-scatter plots</a>,
                <a href="./scatter2d.html" target="_cX_scatter2d">2D-scatter bubble plots</a>, <a href="./scatter3d.html" target="_cX_scatter3d">3D-scatter plots</a> and <a href="./pie.html" target="_cX_pie">pie charts</a>.

              </p>
              <p>

                The data structure can be conceptually represented like this:

              </p>
            </div>

            <div class="pre">
              <pre>

                          ..........................
                          .                        .
                          .  Samp Annotations (x)  .
                          ..........................
                    ..... ..........................
                    .   . .                        .
                    . V . .                        .
                    . a . .                        .
                    . r . .                        .
                    .   . .                        .
                    . A . .                        .
                    . n . .                        .
                    . n . .                        .
                    . o . .        Data (y)        .
                    . t . .                        .
                    . a . .                        .
                    . t . .                        .
                    . i . .                        .
                    . o . .                        .
                    . n . .                        .
                    . s . .                        .
                    .   . .                        .
                    .(z). .                        .
                    .   . .                        .
                    ..... ..........................

              </pre>
            </div>

            <div class="desc">
              <p>

                Suffice to say that any plotting apply to variables and samples,
                one or many.  All data that I have ever analyzed can be divided
                into three compartments. The (y) compartment which contains the
                actual numerical values, the (x) compartment which contains
                characteristics of the samples (these are in statistics terms
                called factors), and the (z) compartment which contains
                annotations for the variables. That is not to say however that
                you always have to have all these compartments but in most cases
                you do. Another point is that the (y) compartment could be
                multi-dimensional depending on the granularity of the data. For
                example rather than having the raw data, you may have the
                average and the standard deviation for variables measured in a
                particular set of samples, or for example, with stock market
                data you may have the open, low, high, close and volume for a
                stock (variable) on a given day (sample). I'll keep it simple
                for now and I'll start with raw data.

              </p>
              <p>

                In <i>json</i> format the data is like this:

              </p>
            </div>

            <div class="json">
              <pre>
                {x: {Tissue:   ['Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver'],
                     Donor:    ['D1',     'D1',    'D1',     'D1',    'D2',     'D2',    'D2',     'D2'],
                     Time:     ['1hour',  '1hour', '2hour',  '2hour', '1hour',  '1hour', '2hour',  '2hour']},
                 z: {Symbol:   ['ABC',    'DEF',   'GHI',    'JKL',   'MNO',    'PQR'],
                     Category: ['A',      'A',     'B',      'C',     'D',      'C']},
                 y: {vars:     ['Gene1',  'Gene2', 'Gene3',  'Gene4', 'Gene5',  'Gene6'],
                     smps:     ['Smp1',   'Smp2',  'Smp3',   'Smp4',  'Smp5',   'Smp6',  'Smp7',   'Smp8'],
                     desc:     ['Intensity'],
                     data:    [[10, 12, 3, 4, 100, 73, 42, 64],
                               [12, 4, 60, 5, 24, 14, 32, 13],
                               [7, 12, 20, 13, 49, 52, 42, 92],
                               [21, 10, 30, 8, 65, 166, 47, 58],
                               [15, 14, 100, 5, 34, 30, 82, 51],
                               [100, 82, 73, 4, 3, 4, 5, 2]]},
                 t: {vars:     '((Gene6:0.2,Gene3:0.3):0.2,((Gene1:0.25,(Gene4:0.15,Gene2:0.3):0.2):0.3,Gene5:0.7):0.1)',
                     smps:     '((Smp2:0.8,(Smp4:0.7,((Smp1:0.6,(Smp6:0.2,Smp5:0.1):0.2):0.15,(Smp8:0.15,Smp3:0.05):0.1):0.15):0.2):0.05,Smp7:0.9)'}}
              </pre>
            </div>

            <div class="desc">
              <p>

                What???? This seems to be more complicated than what I just
                said. Not quite, let's see the (y) property in the data object
                first. It has 4 properties, (vars), which are the name of the
                variables, Gene1, Gene2, etc; (smps), which are the name of the
                samples, Smp1, Smp2, etc; (desc) which is the description of the
                (data), Intensity in this case, which is the fourth
                property. The (data) property is a two dimensional array which
                is the actual data which pretty much matches the initial
                explanation. If you disregard the rest of the properties in the
                data object then you would have the minimum set that yo need to
                provide to use this library, (of course you would not take
                advantage of all the cool stuff). Now the (x) property contains
                extra annotations for the samples (besides their names) and the
                (z) property contains extra anotations for the variables
                (besides their names). Let me briefly reiterate, the (y)
                compartment contains the actual numerical data in a two
                dimensional array (data) for six variables and eight samples,
                the variable names in an array (vars), the sample names in an
                array (smps). The (y) compartment also contains a description
                (desc) of the numerical data which in this case is
                'Intensity'. That is, the 'Intensity' for 'Gene1' in 'Smp1' is
                10. The (x) compartment contains sample annotations, for example
                'Smp1' is a 'Kidney' sample from donor 'D1' taken at
                '1hour'. The (z) compartment contains the variable annotations,
                for example 'Gene1' has the symbol 'ABC' and belongs to the
                category 'A'.<br /> You probably also noticed that there is also
                a (t) property in the data which is used to specify the
                dendrograms or trees for the variables (vars) and/or for the
                samples(smps) using the newick format. This is an optional
                property so those who do not have biological background can
                breath again.

              </p>
              <p>

                In the case of bar-line combination graphs the data structure
                have an additional property called (a) to identify the samples
                that will be plotted in each axis, 'axis1' and 'axis2'. Also the
                property (desc) will have an extra element so the data plotted
                in each axis can be described. That is, one to describe the
                values in 'axis1' and one to describe the values in 'axis2'. So
                the data in <i>json</i> format will be like this:

              </p>
            </div>

            <div class="json">
              <pre>
                {x: {Tissue:   ['Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver'],
                     Donor:    ['D1',     'D1',    'D1',     'D1',    'D2',     'D2',    'D2',     'D2'],
                     Time:     ['1hour',  '1hour', '2hour',  '2hour', '1hour',  '1hour', '2hour',  '2hour']},
                 z: {Symbol:   ['ABC',    'DEF',   'GHI',    'JKL',   'MNO',    'PQR'],
                     Category: ['A',      'A',     'B',      'C',     'D',      'C']},
                 y: {vars:     ['Gene1',  'Gene2', 'Gene3',  'Gene4', 'Gene5',  'Gene6'],
                     smps:     ['Smp1',   'Smp2',  'Smp3',   'Smp4',  'Smp5',   'Smp6',  'Smp7',   'Smp8'],
                     desc:     ['Intensity', 'Normalized Intensity'],
                     data:    [[10, 12, 3, 4, 100, 73, 42, 64],
                               [12, 4, 60, 5, 24, 14, 32, 13],
                               [7, 12, 20, 13, 49, 52, 42, 92],
                               [21, 10, 30, 8, 65, 166, 47, 58],
                               [15, 14, 100, 5, 34, 30, 82, 51],
                               [100, 82, 73, 4, 3, 4, 5, 2]]},
                 a: {axis1:    ['Gene1', 'Gene2', 'Gene3'],
                     axis2:    ['Gene4', 'Gene5', 'Gene6']}}
              </pre>
            </div>

            <div class="desc">
              <p>

                So going back to a previous point, what if you have
                multidimentional data?  Conceptually you could represent it like
                this:

              </p>
            </div>

            <div class="pre">
              <pre>

                                        ..........................
                                        .                        .
                                        .    [Outliers (out)]    .
                                      .......................... .
                                      .                        . .
                                      .     3rd IQR (iqr3)     . .
                                    .......................... . .
                                    .                        . . .
                                    .    1st IQR  (iqr1)     . . .
                                  .......................... . . .
                                  .                        . . . .
                                  .  3rd Quantile (qtl3)   . . . .
                                .......................... . . . .
                                .                        . . . . .
                                .  1st Quantile (qtl1)   . . . . .
                              .......................... . . . ...
                              .                        . . . . .
                              .         N (n)          . . . . .
                            .......................... . . . ...
                            .                        . . . . .
                            . Std Deviation (stdev)  . . . . .
                    ..... .......................... . . . ...
                    .   . .                        . . . . .
                    . V . .                        . . . . .
                    . a . .                        . . . . .
                    . r . .                        . . . ...
                    .   . .                        . . . .
                    . A . .                        . . . .
                    . n . .                        . . . .
                    . n . .                        . . ...
                    . o . .       Mean (mean)      . . .
                    . t . .          or            . . .
                    . a . .     Median (median)    . . .
                    . t . .                        . ...
                    . i . .                        . .
                    . o . .                        . .
                    . n . .                        . .
                    . s . .                        ...
                    .   . .                        .
                    .(z). .                        .
                    .   . .                        .
                    ..... ..........................
                          ..........................
                          .  Samp Annotations (x)  .
                          ..........................

              </pre>
            </div>

            <div class="desc">
              <p>

                (I hope you are impressed with my artistic ability to represent
                an staggered collection of data sets using ASCII characters)

              </p>
              <p>

                An example of multidimensional data for wich you have the mean
                (mean), the standard deviation (stdev) and the number of
                measurements (n) in <i>json</i> format would look like this:

              </p>
            </div>

            <div class="json">
              <pre>
                {x: {Tissue:   ['Kidney', 'Liver', 'Kidney', 'Liver'],
                     Donor:    ['D1',     'D1',    'D1',     'D1'],
                     Time:     ['1hour',  '1hour', '2hour',  '2hour']},
                 z: {Symbol:   ['ABC',    'DEF',   'GHI',    'JKL',   'MNO',    'PQR'],
                     Category: ['A',      'A',     'B',      'C',     'D',      'C']},
                 y: {vars:     ['Gene1',  'Gene2', 'Gene3',  'Gene4', 'Gene5',  'Gene6'],
                     smps:     ['Smp1',   'Smp2',  'Smp3',   'Smp4'],
                     desc:     ['Intensity'],
                     mean:    [[1, 2, 3, 4], [2, 1, 3, 6], [3, 2, 1, 5], [4, 2, 1, 3], [4, 3, 2, 1], [9, 2, 7, 4]],
                     stdev:   [[1, 3, 2, 1], [2, 3, 2, 1], [2, 2, 2, 1], [2, 3, 1, 1], [1, 1, 1, 1], [3, 1, 3, 1]],
                     n:       [[4, 5, 5, 5], [4, 5, 5, 5], [6, 4, 4, 5], [6, 4, 5, 6], [5, 5, 5, 5], [6, 5, 5, 5]]}}
              </pre>
            </div>

            <div class="desc">
              <p>

                I really hope it is clear and you got it since I will explain
                the next data format.

              </p>
              <p>

                The data format for the <a href="./correlation.html" target="_cX_correlation">correlation plots</a> is as follows:

              </p>
            </div>

            <div class="json">
              <pre>
                {y: {smps:  ['Smp1',   'Smp2',  'Smp3',   'Smp4',  'Smp5',   'Smp6',  'Smp7',   'Smp8'],
                     cor:  [[ 1.0,  0.9,  0.4, -0.4, -0.6, -0.4, -0.7, -0.7],
                            [ 0.9,  1.0,  0.3, -0.3, -0.6, -0.4, -0.7, -0.6],
                            [ 0.4,  0.3,  1.0, -0.4, -0.8, -0.5,  0.2, -0.6],
                            [-0.4, -0.3, -0.4,  1.0,  0.1,  0.3,  0.1,  0.7],
                            [-0.6, -0.6, -0.8,  0.1,  1.0,  0.6,  0.3,  0.7],
                            [-0.4, -0.4, -0.5,  0.3,  0.6,  1.0,  0.3,  0.5],
                            [-0.7, -0.7,  0.2,  0,1   0,3,  0,3,  1.0,  0.5],
                            [-0.7, -0.6, -0.6,  0.7,  0.7,  0.5,  0.5,  1.0]]}}
              </pre>
            </div>

            <div class="desc">
              <p>

                As you can see this is just an extension of the previous format
                in which the correlation between samples (in this case) is
                represented in a two dimensional array under the property
                (cor). In fact if you try to plot a correlation plot and you
                don't have the (cor) property, canvasXpress will do it for you
                as long as you provide the raw data. Neeeexxxxxt ...

              </p>
              <p>

                The format for the data for the <a href="./venn.html" target="_cX_venn">Venn diagrams</a> with four groups
                is as follows:

              </p>
            </div>

            <div class="json">
              <pre>
                {venn: {data:   {A: 340, B: 562, C: 620, D: 592,
                                 AB: 639, AC: 456, AD: 257, BC: 915,
                                 BD: 354, CD: 143, ABC: 552, ABD: 578,
                                 ACD: 298, BCD: 613, ABCD: 148},
                        legend: {A: 'List 1',
                                 B: 'List 2',
                                 C: 'List 3',
                                 D: 'List 4'}}}
              </pre>
            </div>

            <div class="desc">
              <p>

                This format contains the property (venn) where the data is
                organized. The (data) property contains the actual data and the
                (legend) property the different lists in the Venn diagram. The
                basic idea here is that in this case there are four lists, A, B,
                C, and D so you just have to assign a number to each one and
                also to any combination of them but they must be in alphabetical
                order; that is, they have to be 'AB' rather than 'BA'. If you
                have only three lists then you only have to assign numbers to A,
                B and C; if you have two list then you only have to assign
                numbers to A nad B.

              </p>
              <p>

                The data format for the <a href="./network.html" target="_cX_network">networks (or pathways)</a> is as follows:

              </p>
            </div>

            <div class="json">
              <pre>
                {nodes:  [{id: 'Gene', color: 'rgb(255,0,0)', shape: 'square', rotate: 1.5, size: 1},
                          {id: 'SNP', color: 'rgb(0,255,0)', shape: 'rectangle', width: 10, height: 20},
                          {id: 'Pheno', color: 'rgb(0,255,255)', shape: 'triangle', size: 1}],
                 edges:  [{id1: 'Gene', id2: 'SNP', color: 'rgb(51,102,255)', width: '1', type: 'line'},
                          {id1: 'Gene', id2: 'Pheno', color: 'rgb(51,102,255)', width: '1', type: 'arrowHeadLine'},
                          {id1: 'SNP', id2: 'Pheno', color: 'rgb(51,102,255)', width: '1', type: 'arrowHeadLine'}],
                 legend: {nodes: [],
                          edges: [],
                          text: []}
              </pre>
            </div>

            <div class="desc">
              <p>

                The (nodes) property contains as it name indicates the
                nodes in the network.  Each node must have a unique
                (id) property. Also, (color), (shape), (rotate),
                (pattern), (outline), (outlineWidth) and either (size)
                or (width) and (height) can be specified for each
                node. The (color) property is specified in an rgb
                format compatible with the &lt;canvas&gt; element. The
                (shape) must be one of the shapes in this library (see
                the options section). The rotation for the shape must
                be expressed in degrees. The (pattern) is either
                'closed' or 'open'. The (size) is a multiplier and not
                the actual size of the node, for example, to make a
                node twice as big, the size should be set to 2. If you
                need more control over the shape then you need to
                specify (width) and (height). The (edges) property as
                you can imagine, contains the info for the edges in
                the network. Each edge must contain an (id1) and an
                (id2) properties which must match two nodes in the
                network. Similarly, you can specify the (color), the
                (width), which is the actual width of the line, the
                (cap) which could be 'butt', 'round' or 'square' and
                the line (type) which should be one of the types in
                this library (see the options section). The property
                (legend) is an object that contains the information
                for the nodes and edges and additional text.

              </p>
              <p>

                Each node may have one parent under the property 'parentNode' and
                it has to match a valid node id. This feature is useful if you want
                to group nodes together. You can assign a name  and / or a label to
                each node. The order in which the text will be displayed is label or
                name or id.

              </p>
              <p>

                The data format for the <a href="./candlestick.html" target="_cX_candlestick">candlesticks plots</a> (Market data) is as follows:

              </p>
            </div>

            <div class="json">
              <pre>
               {market: [{symbol: 'BMY',
                          data: [[20100824, 26.26, 26.37, 25.95, 26.02, 11625900, 26.02],
                                 [20100823, 26.48, 26.76, 26.38, 26.48, 12146600, 26.48],
                                 [20100820, 26.31, 26.54, 26.08, 26.44, 18140100, 26.44],
                                 [20100819, 26.20, 26.29, 25.81, 26.06, 8218000, 26.06],
                                 [20100818, 26.53, 26.57, 26.23, 26.28, 12235800, 26.28],
                                 [20100817, 26.40, 26.79, 26.26, 26.59, 12325700, 26.59],
                                 [20100816, 26.24, 26.34, 26.04, 26.28, 10377700, 26.28],
                                 [20100813, 26.24, 26.46, 26.10, 26.32, 5760100, 26.32],
                                 [20100812, 26.01, 26.39, 26.00, 26.33, 7350500, 26.33],
                                 [20100811, 26.32, 26.50, 26.15, 26.25, 8808100, 26.25],
                                 [20100810, 26.32, 26.78, 26.30, 26.66, 7009500, 26.66],
                                 [20100809, 26.37, 26.54, 26.30, 26.51, 6825300, 26.51],
                                 [20100806, 26.29, 26.45, 26.05, 26.37, 8774900, 26.37],
                                 [20100805, 25.83, 26.38, 25.80, 26.38, 12264600, 26.38],
                                 [20100804, 25.70, 26.13, 25.61, 26.03, 10233700, 26.03],
                                 [20100803, 25.65, 25.85, 25.58, 25.68, 6842900, 25.68],
                                 [20100802, 25.33, 25.61, 25.29, 25.53, 9770900, 25.53],
                                 [20100730, 24.98, 25.13, 24.78, 24.92, 11435700, 24.92],
                                 [20100729, 25.37, 25.50, 24.85, 25.08, 9463800, 25.08],
                                 [20100728, 25.25, 25.36, 25.02, 25.12, 8072400, 25.12],
                                 [20100727, 25.09, 25.35, 24.84, 25.32, 14152600, 25.32],
                                 [20100726, 24.57, 25.03, 24.57, 24.97, 8817400, 24.97],
                                 [20100723, 24.94, 24.95, 24.26, 24.65, 13043700, 24.65],
                                 [20100722, 24.96, 25.22, 24.75, 24.93, 10385300, 24.93],
                                 [20100721, 24.92, 25.11, 24.59, 24.75, 9830000, 24.75],
                                 [20100720, 24.65, 25.09, 24.46, 25.02, 10655500, 25.02],
                                 [20100719, 25.27, 25.27, 24.78, 24.84, 11804800, 24.84],
                                 [20100716, 25.44, 25.47, 25.10, 25.17, 13136300, 25.17]]}]}
              </pre>
            </div>

            <div class="desc">
              <p>

                I guess this is self eveident, it is the same format you
                download data from Yahoo except that the hyphens in the date are
                stripped. Also, you can add many symbols too.

              </p>
              <p>

                And finally the last data format used for the <a href="./genome.html" target="_cX_genome">genome browser</a> is
                probably the most elaborated. This is the <i>json</i> data
                structure:

              </p>
            </div>

            <div class="json">
              <pre>
                {tracks:  [{name: 'Affy Probes',
                            type: 'box',
                            connect: true,
                            fill: 'rgb(255,255,51)',
                            line: 'rgb(0,0,0)',
                            data: [{id: '123456_at', dir: 'right', data: [[100,120], [123,132], [141,160]]},
                                   {id: '234567_at', dir: 'left', data: [[181,200], [211,230], [251,270]]},
                                   {id: '345678_at', dir: 'right', data: [[281,300], [311,330], [351,370]]}]},
                           {hide: true,
                            type: 'bar',
                            height: 20,
                            fill: ['rgb(255,0,0)', 'rgb(0,0,255)', 'rgb(255,255,0)'],
                            line: ['rgb(255,0,0)', 'rgb(0,0,255)', 'rgb(255,255,0)'],
                            data: [{id: '123456_at', data: [100,25,35,46]},
                                   {id: '234567_at', data: [181,80,45,10]},
                                   {id: '345678_at', data: [281,65,46,29]}]},
                           {name: 'Tissue Distribution (Heart, Liver, Kidney)',
                            hide: false,
                            type: 'heatmap',
                            autowidth: true,
                            height: 20,
                            line: 'rgb(0,0,0)',
                            smps: ['Heart', 'Kidney', 'Liver'],
                            data: [{id: '123456_at', data: [100,25,35,46]},
                                   {id: '234567_at', data: [181,80,45,10]},
                                   {id: '345678_at', data: [281,65,46,29]}]},
                           {name: 'SNP',
                            type: 'triangle',
                            fill: 'rgb(100,0,0)',
                            line: 'rgb(0,0,0)',
                            data: [{id: 'SNP123', data: 123},
                                   {id: 'SNP234', data: 145},
                                   {id: 'SNP789', data: 220}]},
                           {name: 'SNP',
                            type: 'line',
                            line: 'rgb(0,255,0)',
                            data: [{id: 'SNP123', data: 123},
                                   {id: 'SNP234', data: 145},
                                   {id: 'SNP789', data: 220}]},
                           {type: 'sequence',
                            subtype: 'DNA',
                            hide: true,
                            line: 'rgb(255,255,255)',
                            data: [{id: 'SNP123', data: [119,'AGCT[TA]CGAG']},
                                   {id: 'SNP234', data: [141,'ATCG[TG]AATA']},
                                   {id: 'SNP789', data: [216, 'GCCC[CT]AGGG']}]}]}
              </pre>
            </div>

            <div class="desc">
              <p>

                If you are not in the biology field please skip this data format
                since I will assume a general understanding of some terms. If
                you are stubborn enough to continue reading or you do have the
                biology background then look at the genome example so you can
                figure out how to format the data. The property (tracks) is an
                array with the tracks you want to represent in a region of the
                genome. They can be of six different (type)s, box, bar, heatmap,
                triangle, line and sequence. The sequence type can be of
                (subtype) 'DNA' or 'Protein'. You may specify the color of the
                shapes with the property (fill) for the inside of the shape and
                (line) for the edge of the shape. Only in the track type 'bar',
                the (fill) and the (line) properties are represented as an array
                of colors so you can assign each bar different colors. The
                (tracks) may have a (name) which will be used as the title for
                the track but you can use the property (hide) to prevent
                displaying it. This is useful in some cases to save landscape as
                well as to make closer elements in adjacent tracks. You may also
                specify the height of the track with the property (height) but
                if you do not, it will take the default value (see the options
                section). Finally you can add as many propertys as you please in
                each track if you need to access them for a click or mouseover
                event (see the event section).

              </p>
              <p>

                First, the 'box' type can have many features specified in its
                (data) property as an array and each one of them may have many
                segments specified in its corresponding (data) property as a
                nested array. The segments can be displayed connected or not
                with the property (connect) which is boolean and is specified at
                the track level. That is, if it is true all the segments in each
                of the features in the track will be connected using a slanted
                line with their apexes in the middle between the adjacent
                segments. Also, each feature must have a unique (id) in the
                track, that is, it is not necessary to have a unique id among
                all the tracks, and it may have an orientation represented as an
                arrow which can be specified with the property (dir) which could
                be right or left. As I mentioned, the segments in each feature
                are an array with the first element representing the coordinate
                for the starting point and the second element with the
                coordinates for the ending point in the genome. Similar you can
                add many more propertys as you please if you need to make use of
                them for mouse events (see the event section).

              </p>
              <p>

                The 'bar' and the 'heatmap' types, similarily, may have many
                features specified in its (data) property represented as an
                array. Each feature identified with a unique (id) may have many
                values identified in its corresponding (data) property also
                represented as an array. The first element of the array is the
                coordinates for the feature in the genome, the rest of the
                elements will be y values for the bar graphs or for the
                heatmap. In the case of the type 'bar', you may specify a
                (width) for the 'bar' at the track level or you may specify
                (autowidth) and in that case the width of the bar will be a unit
                of the base pair in the genome. That is, if you have three bars
                the width of each bar is going to be a third of a base pair. The
                only difference for the 'heatmap' type is that the bars will be
                stacked and the colors will be automatically assigned according
                to the y alues.

              </p>
              <p>

                The 'triangle' and the line types are also very similar except
                that each feature will have a property data to identify the
                coordinates for it in the genome.

              </p>
              <p>

                Finally, the 'sequence' type may also have many features. The
                only difference in the structure of the data is that in each
                feature's data structure, the first element represent the
                coordinates in the genome and the second element is the actual
                sequence. If there are multiple alleles at a given position then
                the sequence is represented in square brackets, for example,
                [AG].

              </p>
            </div>

            <div class="h4">
              <h4><a name="config" id="config"><strong>config</strong></a></h4>
            </div>

            <div class="desc">
              <p>

                Pretty much everything in this library is
                customazible. The configuration parameters are divided
                in sections. The first column has the name of the
                parameter on top and its type (in squegly brackets)
                followed by the default value at the bottom. The
                second column has the description for the parameter on
                top and the options (if applicable) at the bottom.
                The parametes in the grey background are private and
                are not modifiable.... but they could.

              </p>
            </div>


            <table class="config">

              <caption><b>General</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>acknowledgementIcon</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;cx.png
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Acknowledge canvasXpress icon
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>acknowledgementIconPosition</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;outside
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Acknowledge canvasXpress icon position
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>acknowledgment</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Acknowledge canvasXpress
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>autoAdjust</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to automaticaly adjust the size of the canvas in most visualizations. If set to 'false' you can easily adjust the rows and columns in the heatmap visualizations
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>autoAdjustMax</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;3
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of times to try to automaticaly adjust the size of the canvas when autoAdjust is true
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>autoAdjustXTries</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Counter to try to automaticaly adjust the horizontal size of the canvas when autoAdjust is true
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>autoAdjustYTries</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Counter to try to automaticaly adjust the vertical size of the canvas when autoAdjust is true
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>background</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(255,255,255)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Background color for the canvas.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>backgroundGradient1Color</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,0,200)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    The first color of the gradient if the background is a type of gradient.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>backgroundGradient2Color</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,0,36)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    The second color of the gradient if the background is a type of gradient.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>backgroundImage</b>
                  </div>
                  <div>
                    <span class="light">{url}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Url for the background image
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>backgroundType</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;solid
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Type of background for the canvas. The canvas may have a window for plotting the data which may be a gradient, a solid pattern or an image.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>backgroundWindow</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(204,204,204)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Background color of the canvas window when the background type is a type of window.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>backgroundWindowGradient1Color</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,0,200)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    The first color of the gradient if the background is a type of window gradient.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>backgroundWindowGradient2Color</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,0,36)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    The second color of the gradient if the background is a type of window gradient.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>backgroundWindowGradientOrientation</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;vertical
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    The orientation for the gradient if the background type is windowGradient or windowGradient2.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>canvasBox</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to create a box around the canvas
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>canvasBoxColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,0,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the box around the canvas
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>foreground</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,0,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Foreground color for the canvas
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>foregroundWindow</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,0,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Foreground color of the canvas window when the background type is a type of window.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>functions</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Functions exposed to the api
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>gradient</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag used to apply gradients to all elements ploted in the visualizations according to their corresponding color
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>gradientOrientation</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;vertical
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    The orientation for the gradient if the background type is windowGradient or windowGradient2.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>gradientRatio</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;1.3
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Ratio used to generate the linear gradients applied to all elements in the visualizations
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>gradientType</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;radial
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Type of patern used for the gradients applied to all elements in the visualizations
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>graphOrientation</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;horizontal
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Orientation of the graph when plotting one dimensional graphs
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>graphType</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;Bar
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Type of graph
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>margin</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;5
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Length in pixels for the distance between many areas in the graphs
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>marginBottom</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Length in pixels for the bottom margin in the canvas
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>marginLeft</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Length in pixels for the left margin in the canvas
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>marginRight</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Length in pixels for the right margin in the canvas
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>marginTop</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Length in pixels for the top margin in the canvas
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>shadowBlur</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;2
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Amount in blur for the shadow.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>shadowColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgba(0,0,0,0.5)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the shadow.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>shadowOffsetX</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;3
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Length in pixels for the shadow offset in the X axis.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>shadowOffsetY</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;3
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Length in pixels for the shadow offset in the Y axis.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showShadow</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag used to add  shadows to all element in the canvas. It will be forced to false if the browser is IE.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>transparency</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;null
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Percentage of transparency applied to all elements in the visualiztionss
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Text</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>align</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;center
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Default horizontal alignment for drawing text.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>autoScaleFont</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to automatically adjust the font size in many visualization. Please be aware that scaling factors can still modify the font size. This flag needs to be false for the text to accept the specified font size.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>baseline</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;right
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Default vertical alignment for drawing text.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>font</b>
                  </div>
                  <div>
                    <span class="light">{font}</span>&nbsp;Verdana, sans-serif 12pt
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    The combination of font name style and size.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>fontName</b>
                  </div>
                  <div>
                    <span class="light">{font}</span>&nbsp;Verdana, sans-serif
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Font name. It will be set depending on the browser. It could be Optimer, Helvetiker, Gentilis or Verdana, sans-serif
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>fontSize</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;12
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Font size for text in complex plot only. See other categories to modify specific font sizes.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>fontStyle</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Font style. Not implemented yet.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>fonts</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Font name. It will be set depending on the browser. It could be Optimer, Helvetiker, Gentilis or Verdana, sans-serif
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>maxTextSize</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;14
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Maximum size for any text in the canvas.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>minTextSize</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;4
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Minimum size for any text in the canvas.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>scaleTextConstantAdd</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;2.5
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Constants to autoscale text (extra)
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>scaleTextConstantMult</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;40
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Constants to autoscale text
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Titles</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>citation</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    A reference citation of the graph which is placed at the bottom right corner
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>citationColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,0,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for a reference citation of the graph
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>citationFont</b>
                  </div>
                  <div>
                    <span class="light">{font}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Font for the reference citation
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>citationScaleFontFactor</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Scaling factor used to increase or decrease citation font size in the canvas
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>smpTitleFontSize</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;6
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Size for the text of the reference citation of the graph
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>subtitle</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;rgb(0,0,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Title of the graph.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>subtitleHeight</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;16
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Height for the subtitle of the graph. The font height will be adjusted automatically to fit in the canvas.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>title</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Title of the graph.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>titleColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,0,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the subtitle
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>titleHeight</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;30
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Height for the title of the graph. The font height will be adjusted automatically to fit in the canvas.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Attributes</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>arrowPointSize</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;10
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Size in pixels of the arrow head in arrow lines.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>capType</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;butt
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Default type of cap for lines.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>colorHSV</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color HSV. Hue, Saturation and Value used in the configurator
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>colorRGB</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color RGB. Red, Green, Blue used in the configurator
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>colorScheme</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;basic
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color schemes can be user defined which will take the colors in the color property or one provided in canvasXpress. The order of the colors will be used to sequentially select when a different color is needed in a particular visualization.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>colors</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;colors
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Colors.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>dashLength</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;8
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Size in pixels of the length of the dashes and the separation between the dashes in the dashed lines.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>dotLength</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Size in pixels of the length between dots in the doted lines.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>evenColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(240,240,240)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    The color for the even numbers in samples or sequences
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>images</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Array of urls of images used in scatter plots.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>lines</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Line types available network graphs The patterns can be: '', 'dashed', 'dotted', 'bezierY', 'bezierX' and 'curved'. The end could be: 'arrow', 'arrowHead', 'arrowTail', 'arrowHeadSquareTail', 'arrowTailSquareHead', 'square', 'squareHead', 'squareTail', 'squareHeadArrowTail' or 'squareTailArrowHead'.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>oddColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;background color
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    The color for the odd numbers in samples or sequences
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>outlineWidth</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Default width in pixels for the lines
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>shapes</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Shapes used in network graphs
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sizes</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Sizes used invisualizations
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>timeFormat</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;isoDate
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Time Format according to date.format.js Steven Levithan <stevenlevithan.com>
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Samples</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>filterSmpBy</b>
                  </div>
                  <div>
                    <span class="light">{filter}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Filter samples by their annotation included in the 'data.x' object used in one dimensional plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>highlightSmp</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Name of samples in the 'data.y' object to highlight.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>maxSmpStringLen</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;50
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Maximum length in characters a sample label or description can have so anything above is truncated.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showSampleNames</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to show the sample names in one dimensional plots.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>smpHighlightColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(255,0,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    The color for the higlighted samples.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>smpLabelColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;foreground color
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Font color for the sample labels in one dimensional plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>smpLabelDescription</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Sample label description is a valid sample classification included in the 'data.x' object used in heatmaps
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>smpLabelFont</b>
                  </div>
                  <div>
                    <span class="light">{font}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Font for the sample labels in one dimensional plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>smpLabelFontSize</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;10
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Size for the sample labels in one dimensional plots. Be aware that auto scaling font must be turned off for this property to take effect. A more convenient way to modify the size is to use the sample label scaling factor
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>smpLabelInterval</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Interval for the sample labels in one dimensional plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>smpLabelRotate</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Rotation for sample labels in degrees. It could be positive or negative.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>smpLabelScaleFontFactor</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Scaling factor used to increse or decrease sample label font size in the canvas.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>smpTitle</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Title for the sample axis in one dimensional plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>smpTitleColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;foreground color
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Font color for the sample title in one dimensional plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>smpTitleFont</b>
                  </div>
                  <div>
                    <span class="light">{font}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Font for the sample title in one dimensional plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>smpTitleFontSize</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;10
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Size for the sample title in one dimensional plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>smpTitleScaleFontFactor</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Scaling factor used to increse or decrease sample title font size in the canvas
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Variables</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>filterVarBy</b>
                  </div>
                  <div>
                    <span class="light">{filter}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Filter variables by their annotation included in the 'data.z' object used in one dimensional plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>highlightVar</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Name of variables in the 'data.y' object to highlight.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>maxVarStringLen</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;30
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Maximum length in characters a variable label or description can have so anything above is truncated.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showVariableNames</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to show the variable names in one dimensional plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>varHighlightColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(255,0,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    The color for the highlighted variables.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>varLabelColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;foreground color
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Font color for the variable labels in one dimensional plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>varLabelDescription</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Variable label description is a valid sample classification included in the 'data.z' object used in heatmaps
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>varLabelFont</b>
                  </div>
                  <div>
                    <span class="light">{font}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Font for the variable labels in one dimensional plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>varLabelFontSize</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;10
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Size for the variable labels in one dimensional plots. Be aware that auto scaling font must be turned off for this property to take effect. A more convenient way to modify the size is to use the variable label scaling factor
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>varLabelInterval</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Interval for the variable labels in heatmaps
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>varLabelRotate</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Rotation for variable labels in degrees It could be positive or negative.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>varLabelScaleFontFactor</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Scaling factor used to increse or decrease variable font size in the canvas.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>varTitle</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;10
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Title for the sample axis in one dimensional plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>varTitleColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;foreground color
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Font color for the variable titles in one dimensional plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>varTitleFont</b>
                  </div>
                  <div>
                    <span class="light">{font}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Font for the variable titles in one dimensional plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>varTitleFontSize</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;10
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Size for the variable title in one dimensional plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>varTitleLabelOverlayPosition</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;bottom
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Position for variable labels in heatmaps
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>varTitleScaleFontFactor</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Scaling factor used to increse or decrease variable font size in the canvas.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Overlays</b><caption>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>overlayFont</b>
                  </div>
                  <div>
                    <span class="light">{font}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Font for the overlays in one dimensional plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>overlayFontColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;foregroung color
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the overlays in one dimensional plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>overlayFontSize</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;6
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Font size for the overlays in one dimensional plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>overlayScaleFontFactor</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Scaling factor used to increse or decrease overlays font size in the canvas in one dimensional plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>overlaysWidth</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;30
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Length in pixels of the width for the colored boxes to clasify samples and or variables in one dimensional plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showOverlays</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to indicate to show or not the overlays in one dimensional plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>smpOverlayRecycleColors</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to indicate to recycle sample overlay colors with each overlay
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>smpOverlays</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Sample annotations included in the 'data.x' object used in one dimensional plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>varOverlayRecycleColors</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to indicate to recycle variable overlay colors with each overlay
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>varOverlays</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Variable annotations included in the 'data.z' object used in one dimensional plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Legends</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>legendBackgroundColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;background color
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the legend background
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>legendBox</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to create a box around the legend
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>legendBoxColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,0,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the box around the legend
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>legendColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;foregroung color
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the legends
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>legendFont</b>
                  </div>
                  <div>
                    <span class="light">{font}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Font for the legends
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>legendFontSize</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;10
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Font size for the legends. Be aware that auto scaling font must be turned off for this property to take effect. A more convenient way to modify the size is to use the legend scaling factor
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>legendPosition</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;right
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Position for the legend in the graphs
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>legendScaleFontFactor</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Scaling factor used to increse or decrease legend font size in the canvas.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showLegend</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to show or not the legend in the graphs
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Indicators</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>indicatorsPosition</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;bottom
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Position for the color, shape and size indicators in several visualizations
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showIndicators</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to show color, shape and size indicators in several visualizations
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Decorations</b><caption>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>decorationFont</b>
                  </div>
                  <div>
                    <span class="light">{font}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Font for the decoration in scatter plots and network graphs
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>decorationFontSize</b>
                  </div>
                  <div>
                    <span class="light">{font}</span>&nbsp;10
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Font size for the decorations in scatter plots and network graphs
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>decorationScaleFontFactor</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Scaling factor used to increse or decrease decoration font size in the canvas.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>decorations</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Name of the node properties to include in the network decorations in the 'data.nodes' object
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>decorationsColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;foreground color
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the decorations in scatter plots and network graphs
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>decorationsColors</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Array of colors used for selection in network decorations not to be confused by its singular form 'decorationsColor' above
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>decorationsHeight</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;20
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Length in pixels of the height for the decorations in the networks
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>decorationsPosition</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;bottom
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Position for the decorations in scatter plots and network graphs
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>decorationsProperties</b>
                  </div>
                  <div>
                    <span class="light">{object}</span>&nbsp;{}
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Object to assign properties like color for the network decorations
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>decorationsType</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;bar
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Type for the decorations in the networks. The types stacked and stackedpercent must be two dimensional. Heatmap could be one or two dimensional
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>decorationsWidth</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;10
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Length in pixels of the width for the decorations in the networks
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showDecorations</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to show or not extra decorations like (regression lines, splines, etc) in scatter plots and (heatmaps, pie charts or stacked bar graphs in) network graphs
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Ticks and Axis Titles</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>axisTickColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;foregroung color
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the axis ticks in one and two dimensional plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>axisTickFont</b>
                  </div>
                  <div>
                    <span class="light">{font}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Font for the axis ticks in one and two dimensional plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>axisTickFontSize</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;10
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Font size for the axis ticks in one and two dimensional plots. Be aware that auto scaling font must be turned off for this property to take effect. A more convenient way to modify the size is to use the tick scaling factor
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>axisTitleColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;foregroung color
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the axis title in one and two dimensional plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>axisTitleFont</b>
                  </div>
                  <div>
                    <span class="light">{font}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Font for the axis titles in one and two dimensional plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>axisTitleFontSize</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;10
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Font size for the axis titles in one and two dimensional plots. Be aware that auto scaling font must be turned off for this property to take effect. A more convenient way to modify the size is to use the axis title scaling factor
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>axisTitleScaleFontFactor</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Scaling factor used to increse or decrease title font size in the canvas in one and two dimensional plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>tickRotate</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Rotation for graph ticks in degrees. It could be positive or negative.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>tickScaleFontFactor</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Scaling factor used to increse or decrease tick font size in the canvas in one and two dimensional plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Data</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>groupingFactors</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    An array that holds the group names used for grouping the data. It must be a category in the 'data.x' object
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>isBoxPlotCalc</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to indicate if the iqr has been calculated if the graph type is Boxplot.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>isGraphTime</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to indicate if the data is a time series so ther is no need to plot every time interval
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>isGroupedData</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to indicate if the data is grouped.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>isLogData</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to indicate if the data is Log transformed.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>isMarketDataFormated</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to indicate if the data has been formated to display Candlestick.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>isMarketSwitched</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to indicate if the data is a Candlestick.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>isTransformedData</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to indicate if the data is transformed.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>missingDataColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(255,255,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the missing data
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>randomData</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to create or not random data for debug and demonstraion purposes
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>randomDataMean</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;100
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Mean value when creating random data
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>randomDataSampleAnnotationRatio</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;2
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Approximate number of classes in each sample annotation when creating random data
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>randomDataSampleAnnotations</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;3
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Default number of sample annotations when creating random data
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>randomDataSamples</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;50
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Default number of samples when creating random data
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>randomDataSigma</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;100
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Sigma value when creating random data
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>randomDataVariableAnnotationRatio</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;2
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Approximate number of classes in each variable annotation when creating random data
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>randomDataVariableAnnotations</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;2
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Default number of variable annotations when creating random data
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>randomDataVariables</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;50
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Default number of variables when creating random data
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>randomMissingDataPercentage</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Default percentege of missing values when creating random data
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>ratioReference</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Default index of sample used in ratio transformation.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>segregateSamplesBy</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    String to indicate the annotation used to segregate the samples. It must be a category in the 'data.x' object
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>segregateVariablesBy</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    String to indicate the annotation used to segregate the variables. It must be a category in the 'data.z' object
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showErrorBars</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to indicate whether to show or not error bars in the graphs.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>smpSort</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Sample index used in sorting the data.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sortDir</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;ascending
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Default direction for data sorting.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>tmpAsciiArray</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    A temporary array to enable sorting data asciibetically.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>transformBase</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;2
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Default log or exponential transformation.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>transformType</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Default transformation type.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>varSort</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Variable index used in sorting the data.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>zscoreAxis</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;samples
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Default axis to use to zsore the data.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Zooming and Panning</b><caption>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>panningGlobalX</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Cumulative number of unit to pan the network in the X dimension
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>panningGlobalY</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Cumulative umber of unit to pan the network in the Y dimension
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>panningStep</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;0.2
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Percentage step for panning networks.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>panningX</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of unit to pan the network in the X dimension
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>panningY</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of unit to pan the network in the Y dimension
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>zoom</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Zoom factor for the networks. A number greater than zero
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>zoomGlobal</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Cumulative zoom factor for the networks.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>zoomSamplesDisable</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to disable zooming of samples with mouse wheel in Heatmaps
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>zoomStep</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;0.2
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Percentage step for zooming networks and genome panel.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>zoomVariablesDisable</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to disable zooming of variables with mouse wheel in Heatmaps
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Filtering</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>filterType</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;and
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Type for the filter. Can be 'and' or 'or'
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Clustering</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>centerData</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to indicate whether to center data when clustering
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>clusterAxis</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;samples
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Default axis to use when clustering data.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>distance</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;euclidian
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Distance metric to use when clustering data.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>imputeMethod</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;mean
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Imputation method for missing data when clustering
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>kmeansClusters</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;3
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of clusters when clustering data with kmeans.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>linkage</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;single
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Linkage type to use when clustering data.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>maxIterations</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;10
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of maximum iterations when clustering data with kmeans for one dimensional graphs or maximum number of iterations when calculating force direct layout networks.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>useSmpVarIndexOnClustering</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to indicate to use variable or sample index rather than names when clustering. This allows to use '(', ')' and ':' in the variable or sample name
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Axes</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>axisExact</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to force exact values for the data
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>axisExtension</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;0.1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Percentage to extend the values in the data
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>rAxisAbsMax</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Maximum unfiltered value for the R axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>rAxisAbsMin</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Minimum unfiltered value for the R axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>rAxisCurrent</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Index of the sample that is currently displayed displayed in the R axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>rAxisExact</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to force exact values for the data in the R axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>rAxisMaxStrLength</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Longest string for ticks in the R axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>rAxisMinorTicks</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    A flag to show minor tick lines in the R axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>rAxisMinorValues</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Values for the minor ticks in the R axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>rAxisShow</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to show on not the values of the ticks in the R axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>rAxisTickColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(204,204,204)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the tick lines in the R axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>rAxisTickFormat</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Format for the tick values in the R axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>rAxisTickStyle</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;solid
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Style for the tick lines in the R axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>rAxisTicks</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;5
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of ticks in the R axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>rAxisTitle</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Title for the R axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>rAxisTransform</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Tranformation for the values in the R axis.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>rAxisTransformTicks</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to transform the values of the ticks in the R axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>rAxisValues</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Values for the ticks in the R axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>setMax</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;null
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Maximum value to set the data
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>setMax2</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;null
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Maximum value to set the data in the 2nd axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>setMaxR</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;null
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Maximum value to set the data in the R axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>setMaxX</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;null
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Maximum value to set the data in the X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>setMaxY</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;null
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Maximum value to set the data in the Y axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>setMaxZ</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;null
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Maximum value to set the data in the Z axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>setMin</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;null
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Minimum value to set the data
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>setMin2</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;null
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Minimum value to set the data in the 2nd axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>setMinR</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;null
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Minimum value to set the data in the R axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>setMinX</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;null
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Minimum value to set the data in the X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>setMinY</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;null
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Minimum value to set the data in the Y axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>setMinZ</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;null
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Minimum value to set the data in the Z axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>ticks</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;50
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of ticks in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>timeTicksFirst</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to indicate whether to use the first date on a time graph or the last
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>timeValueIndices</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Array containig the indices of the values when the the graph is a time series
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>timeValues</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Array containig the tick values when the the graph is a time series
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>xAxis</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Name of the samples groups or variables to be displayed in the X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>xAxis2</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Name of the samples groups or variables to be displayed in the 2nd X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>xAxis2AbsMax</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Maximum unfiltered value for the 2nd X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>xAxis2AbsMin</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Minimum unfiltered value for the 2nd X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>xAxis2Exact</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to force exact values for the data in the 2nd X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>xAxis2MaxStrLength</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Longest string for ticks in the 2nd X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>xAxis2MinorTicks</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    A flag to show minor tick lines in the 2nd X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>xAxis2MinorValues</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Values for the minor ticks in the 2nd X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>xAxis2TickFormat</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Format for the tick values in the second X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>xAxis2Ticks</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;5
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of ticks in the 2nd X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>xAxis2Values</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Values for the ticks in the 2nd X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>xAxisAbsMax</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Maximum unfiltered value for the X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>xAxisAbsMin</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Minimum unfiltered value for the X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>xAxisCurrent</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Index of the sample that is currently displayed displayed in the X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>xAxisExact</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to force exact values for the data in the X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>xAxisMaxStrLength</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Longest string for ticks in the X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>xAxisMinorTicks</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    A flag to show minor tick lines in the X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>xAxisMinorValues</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Values for the minor ticks in the X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>xAxisShow</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to show on not the values of the ticks in the X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>xAxisTickColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(204,204,204)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the tick lines in the X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>xAxisTickFormat</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Format for the tick values in the X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>xAxisTickStyle</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;solid
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Style for the tick lines in the X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>xAxisTicks</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;5
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of ticks in the X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>xAxisTitle</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Title for the X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>xAxisTransform</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Tranformation for the values in the X axis.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>xAxisTransformTicks</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to transform the values of the ticks in the X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>xAxisValues</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Values for the ticks in the X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>yAxis</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Name of the samples groups or variables to be displayed in the Y axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>yAxisAbsMax</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Maximum unfiltered value for the Y axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>yAxisAbsMin</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Minimum unfiltered value for the Y axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>yAxisCurrent</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Index of the sample that is currently displayed displayed in the Y axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>yAxisExact</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to force exact values for the data in the Y axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>yAxisMaxStrLength</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Longest string for ticks in the Y axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>yAxisMinorTicks</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    A flag to show minor tick lines in the Y axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>yAxisMinorValues</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Values for the minor ticks in the Y axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>yAxisShow</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to show on not the values of the ticks in the Y axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>yAxisTickColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(204,204,204)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the tick lines in the Y axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>yAxisTickFormat</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Format for the tick values in the Y axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>yAxisTickStyle</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;solid
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Style for the tick lines in the Y axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>yAxisTicks</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;5
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of ticks in the Y axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>yAxisTitle</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Title for the Y axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>yAxisTransform</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Tranformation for the values in the Y axis.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>yAxisTransformTicks</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to transform the values of the ticks in the Y axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>yAxisValues</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Values for the ticks in the Y axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>zAxis</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Name of the samples groups or variables to be displayed in the Z axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>zAxisAbsMax</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Maximum unfiltered value for the Z axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>zAxisAbsMin</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Minimum unfiltered value for the Z axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>zAxisCurrent</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Index of the sample that is currently displayed displayed in the Z axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>zAxisExact</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to force exact values for the data in the Z axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>zAxisMaxStrLength</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Longest string for ticks in the Z axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>zAxisMinorTicks</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    A flag to show minor tick lines in the Z axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>zAxisMinorValues</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Values for the minor ticks in the Z axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>zAxisShow</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to show on not the values of the ticks in the Z axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>zAxisTickColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(204,204,204)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the tick lines in the Z axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>zAxisTickFormat</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Format for the tick values in the Z axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>zAxisTickStyle</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;solid
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Style for the tick lines in the Z axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>zAxisTicks</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;5
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of ticks in the Z axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>zAxisTitle</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Title for the Z axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>zAxisTransform</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Tranformation for the values in the Z axis.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>zAxisTransformTicks</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to transform the values of the ticks in the Z axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>zAxisValues</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Values for the ticks in the Z axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>One dimentional plots</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>blockContrast</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    A flag to creates a shade between the samples so there are two backgrounds, one for the odd samples and one for the even samples.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>blockFactor</b>
                  </div>
                  <div>
                    <span class="light">{int}</span>&nbsp;1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Factor to adjust the size of the sample blocks in the one dimensional graphs. The default is 1. If you want to make the blocks wider then increase this parameter (2 is twice as big). This only works if the auto adjust property is set to 'false'
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>blockSeparationFactor</b>
                  </div>
                  <div>
                    <span class="light">{int}</span>&nbsp;1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Factor to adjust the spacing between the sample blocks in the one dimensional graphs. The default is 1. If you  want to make the blocks wider apart then increse this parameter (2 is twice as much). This only works if the auto adjust property is set to 'false'
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>is3DPlot</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to create or not a 3D plot
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>plotByVariable</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to indicate whether to group the data variable rather than by sample
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>seriesSeparationFactor</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;2
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Factor to adjust the spacing between the series in the bar graphs
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>smpHairline</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;dotted
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    This is a thin line that appears in the middle of the bar graphs just for aesthetics.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>smpHairlineColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(204,204,204)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    The color for the thin line that appears in the middle of the bar graphs
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>smpHairlineWidth</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;0.3
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    The width for the thin line that appears in the middle of the sample block just for aesthetics.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Bar Graphs</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showDataValues</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to indicate whether to show data values in the one bar graphs.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Line Graphs</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>coordinateLineColor</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to used same color in BarLine plots. If set to true the color of the bars and the lines will be the same
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>lineDecoration</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;sybol
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Lines decorations in the line graphs
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>lineTickness</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Thickness in pixels for line plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>lineType</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;rect
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Type of line used to join the points in line graphs
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>tension</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;0.3
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Curvature for the splines
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Dot Plots</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>dotPlotDataPointRatio</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;2
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Ratio to adjust the size of the data points when displaying original data in boxplots. The higher the number the smaller the data points
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>dotPlotDataPointTransparency</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;0.5
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Fraction to adjust color transparency for the data points when displaying original data in boxplots.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>dotPlotJitter</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to jitter the point in dotplots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Box Plots</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>boxPlotOutliersRatio</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;8
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Ratio for the size of the outliers with respect to boxplot
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showBoxplotOriginalData</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to show original data in boxplots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Area Graphs</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>areaIsCumulative</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to treat area graphs as cumulative values
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Scatter and One-D Plots</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>colorBy</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Name of a variable annotation or a sample name or the string 'variable' to color the variables.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>outlineBy</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Name of the annotation for the outline when drawing a multidimensional Heatmap
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>shapeBy</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Name of a variable annotation or a sample name or the string 'variable' to shape the variables.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>shapeByShape</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    String that identify the shape to use in multidimensional heatmaps. shapeByData will take precedence over this property.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sizeBy</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Name of a variable annotation or a sample name or the string 'variable' to size the variables.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>this</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    String that identify the object containing a two dimensional array with values used to color the outline data points when drawing a multidimensional Heatmap. It must be located within the data.y object (for example: data.y.data4)
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Scatter Plots</b><caption>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>isSelectDataPoints</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of selected data points (in the data object).
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>scatterSeries</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;y
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Axis that contain the series in the scatter plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>scatterType</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Type of scatter plot
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>selectDataMode</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;area
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Type of mode to highliht selected data points
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>selectDataModeDescription</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Variable label to display when highlihting selected data points that must be in the 'data.z' object
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>selectDataPoint</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Ids of data points (in the data object) to select.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>2D Scatter Plot</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>allVsAll</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to plot an n-1 x n-1 matrix of 2D sccaterplots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>allVsAllType</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;both
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Type for the n-1 x n-1 matrix of 2D sccaterplots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>functionIntervals</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;20
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of intervals to use when drawing functions in the decorations
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>histogramBarWidth</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;0.5
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Length in pixels for half of the bar width in the 2D sccaterplot histogram
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>histogramBins</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;20
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of bins in histogram
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>isCreateHistogram</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to indicate there is a histogram
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>isHistogram</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to convert the 2D scatter plot into a histogram. That is, the points in the scatter plot are converted to bars that start at the bottom of the Y axis. It is useful to represent proteomics spectra or histograms.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>3D Scatter Plot and Networks</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>bar3DInverseWeight</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Value for adjusting the thickness of 3D bars. The larger the value the the thinner the bar
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>cullingThreshold</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;1000
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of data point to start culling data
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>maxRotate</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Maximum number of degrees to rotate graph arround axes
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>minRotate</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Minimum number of degrees to rotate graph arround axes
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>rotationDelay</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;100
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Time in milliseconds to wait between rendering the plot when dragging the mouse.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>rotationSensitivity</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;45
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Factor to adjust the sensitivity of the mouse when rotating the  graph
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>rotationStep</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;2
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of degrees used when the plot is automatically rotated
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>show3DGrid</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to show the X,Y,Z grid in scatter 3D plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>x3DRatio</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Value between 0 - 1 for adjusting the 3D of the X Axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>xRotate</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;45
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of degrees to rotate graph arround the X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>y3DRatio</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Value between 0 - 1 for adjusting the 3D of the Y Axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>yRotate</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of degrees to rotate graph arround the Y axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>z3DRatio</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Value between 0 - 1 for adjusting the 3D of the Z Axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>zRotate</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of degrees to rotate graph arround the Z axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Heatmaps and Networks</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>heatmapType</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;blue-red
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color shades for the heatmap. It could be red, blue, green, yellow, cyan, purple or any combination of two colors separated by a dash
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>indicatorCenter</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;white
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the center of the heatmap indicator. If rainbow-red is specified the order of the colors to generate the gradient will be: red - blue - green. If rainbow-green is specified then the order of the colors to generate the gradient will be: green - blue - red. The option rainbow is an alias for rainbow-red.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>indicatorHeight</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;8
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Length in pixels for the heatmap indicator
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>indicatorWidth</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Length in pixels for the heatmap indicator line width used for increase the size of the indicator
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Heatmaps</b><caption>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>isMultidimensionalHeatmap</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to indicate if the heatmap is multidimensional
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>smpIndicesStart</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number that indicates starting point for samples in heatmaps when the canvas is zoom in.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>varIndicesStart</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number that indicates starting point for variables in heatmaps when the canvas is zoom in.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Correlation Graphs</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>correlationAnchorLegend</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to show a region above the correlation plot that anchror a sample/variable to a position
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>correlationAnchorLegendAlignWidth</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;40
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Length in pixels of the height of the correlation anchor legend
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>correlationAxis</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;samples
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Axis used for the correlation.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>correlationLabelInterval</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Interval for the sample or variable labels in the correlation plot
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Dendrograms</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>dendrogramColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(204,204,204)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    The color for the dendrograms
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>dendrogramHang</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to show or not the nodes in the dendrogram as hanging or not similar to that one in R
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>dendrogramHeight</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to size the branches of the dendrogram.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>dendrogramSpace</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;6
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Length in pixels to space the branches in the dendrograms.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showSmpDendrogram</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to show or not the sample dendrogram
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showVarDendrogram</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to show or not the variable dendrogram
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>smpDendrogramPosition</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;left
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Position for the sample dendrogram in the plot. It could be top, bottom, right or left depending on the orientation of the graph.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>varDendrogramPosition</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;top
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Position for the variable dendrogram in the plot. It could be top, bottom, right or left depending on the orientation of the graph.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Venn Diagrams</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>vennColors</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Colors for the Venn bubles. If not specified the colors will be chosen from the colors array. Colors in this array need to be at least the same number of groups in the Venn diagram
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>vennCompartments</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Name for the compartments in the the Venn diagrams
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>vennGroups</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;4
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of groups in the Venn diagram
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Pie Charts</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>maxPieSectors</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;20
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Max pie sectors. After that number the sectors will be put in a sector named 'other'.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>pieSegmentLabels</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;inside
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Location for the values in the pie charts
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>pieSegmentPrecision</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of decimals for values in the Pie charts
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>pieSegmentSeparation</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;3
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Length in pixels for the separation of the pieces of the pie charts
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>pieType</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;separated
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Position for the pices of the pie
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showPieGrid</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    A flag to show the labels for the grid when plotting multiple pies
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showPieSampleLabel</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    A flag to show the sample label when plotting mutliple pies
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showPieValues</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    A flag to show the values for the pie
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>startPieSectors</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Starting degrees for pie sectors. 0 is equivalent to 3:00 oclock
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Circular Graphs</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>donutProportion</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;0.3
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Proportion of the center of the circular graph to use as void
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>rAxis</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Radial axis for circular plots. It must be the name of a variable
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>rAxisZero</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to force the rAxis to start from zero otherwise it starts from the minimum value
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>ringBetweenSeparation</b>
                  </div>
                  <div>
                    <span class="light">{int}</span>&nbsp;10
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of pixels to separate the rings in the circular plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>ringSegmentSeparation</b>
                  </div>
                  <div>
                    <span class="light">{int}</span>&nbsp;10
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of degrees to separate the segments in the circular plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>ringType</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Array containing the types for each ring in the circular plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>ringWeight</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Array containing the dimensions for each ring in the circular plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Candlestick Plots</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showVolume</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to show or not volume in the candlestick graphs
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sma10Color</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,255,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    The color for the 5 day single moving average
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sma20Color</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,0,255)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    The color for the 25 day single moving average
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sma25Color</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(255,0,255)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    The color for the 25 day single moving average
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sma50Color</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,0,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    The color for the 50 day single moving average
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sma5Color</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(255,0,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    The color for the 5 day single moving average
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>stockIndicators</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Stock technical indicators
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Network Graphs</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>approximateNodePositions</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to force approximate X, Y node positions.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>attractiveForceFunction</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;FruchtermanReingold
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Type of function to apply when calculating attractive force in forceDirected network layouts
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>autoHideOnDecorationsCenter</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to hide node when decorations are positioned on the center
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>calculateLayout</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to force or not to calculate the network layout.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>colorEdgeBy</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Name of the attribute to color the edges.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>colorNodeBy</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Name of the attribute to color the nodes.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>edgeConfigurableProperties</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;'width', 'cap', 'exact', 'type'
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Edge configurable properties
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>edgeWidth</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Default width for the edges in the networks
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>filterEdgeBy</b>
                  </div>
                  <div>
                    <span class="light">{filter}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Filter edges by their properties used in network graphs
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>filterNodeBy</b>
                  </div>
                  <div>
                    <span class="light">{filter}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Filter nodes by their properties used in network graphs
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>highlightNode</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Name of nodes in the 'data.nodes' object to highlight.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>initialTemperature</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Initial temperature to limit displacement at later stages of forceDirected and organic layouts. A value based on the number of node and edges will be assigned if not specified
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>is3DNetwork</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to create or not a 3D network
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>isSelectNodes</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of selected nodes (in the data object).
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>layoutTime</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;15
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Time in milliseconds used to calculate the layout for the network
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>moveParentsWithChildren</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to make parents move when a child is moved
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>network2DRotate</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of degrees to rotate network arround the X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>networkDepth</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Depth of the radial network.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>networkDivisions</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of angular divisions in the radial network.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>networkForceConstant</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Constant used for calculating attractive and repulsive forces in forcedDirected and organic layouts. A value based on the average area per node will be assigned if not specified
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>networkFreeze</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to prevent autoscaling for the network layout.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>networkFreezeOnLoad</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to prevent autoscaling for the network layout after loading.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>networkLayoutType</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;forceDirected
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Type of network layout.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>networkNodeMinDistance</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;2
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Minimum distance between nodes in forceDirected and organic layouts
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>networkNodesOnTop</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Order to use when drawing nodes and edges in the networks
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>networkRoot</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Node Id of the network root.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>networkStack</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Array to keep state of the network after a drag or move
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>networkStackIndex</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Index in the network stack for undo and redo operations
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>networkStackStates</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;5
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of states to keep in the network stack after a drag or move
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>nodeConfigurableProperties</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;'x', 'y', 'z', 'shape', 'color', 'outline', 'size', 'width', 'height', 'pattern', 'rotate', 'outlineWidth', 'imagePath', 'zIndex', 'eventless'
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Node configurable properties
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>nodeFont</b>
                  </div>
                  <div>
                    <span class="light">{font}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Font for the text in networks
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>nodeFontColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;background color
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the network text
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>nodeFontSize</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;node width
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Size in pixels for the font size of text in the networks
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>nodeHighlightColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(255,0,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    The color for the highlighted nodes.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>nodeScaleFontFactor</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Scaling factor used to increse or decrease network text font size in the canvas.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>nodeSize</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;10 | 20
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Length in pixels for the size of the nodes in the network
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>overrideEventlessNodes</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to override nodes that do not take events to be able to edit them
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>preScaleNetwork</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to prescale or not the network. This is a aesthetic parameter to make the graph look nicer... Sometimes...
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>randomNetwork</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to create or not random network for debug and demonstraion purposes
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>randomNetworkNodeEdgesMax</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;5
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Default number of maximum edges when creating random networks
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>randomNetworkNodes</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;50
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Default number of nodes when creating random networks
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>reduceRandomNetwork</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to create or not a single random network for debug and demonstraion purposes
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>repulsiveForceFunction</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;square
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Type of function to apply when calculating repulsive force in forceDirected network layouts
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>selectNode</b>
                  </div>
                  <div>
                    <span class="light">{object}</span>&nbsp;{}
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Name of nodes (in the data object) to select.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>shapeEdgeBy</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Name of the attribute to shape the nods.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>shapeNodeBy</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Name of the attribute to shape the nods.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showHiddenChildEdges</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to show or not children nodes when the parent node is hidden.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showNetworkDecorationsLegend</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to show node legends in the networks
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showNetworkEdgesLegend</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to show edge legends in the networks
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showNetworkNodesLegend</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to show node legends in the networks
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showNetworkRadialLayout</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to show or not a radial layout wire.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showNetworkTextLegend</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to show node legends in the networks
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showNodeNameThreshold</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;50
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Thereshold used to set the limit to hide or display the name of nodes in a network. If the number of nodes exceed this thereshold then the name will not be shown.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sizeDecorationBy</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Name of the attribute to size the network decoration.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sizeEdgeBy</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Name of the attribute to size the edges.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sizeNodeBy</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Name of the attribute to size the nodes.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>skipClick</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to skip click events after a mouse down event in the networks when the eventModel is global
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>subNetworks</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Array to keep independent networks
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>temperature</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Temperature to limit displacement at later stages of forceDirected and organic layouts. A value based on the number of node and edges will be assigned if not specified
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Genome Browser</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>featrureCoordinateHeight</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;12
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Default size in pixels of the coordinates height
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>featrureQualityHeight</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;12
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Default size in pixels of the quality height
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>featrureSignalToNoiseHeight</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;12
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Default size in pixels of the quality height
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>featrureTranslateHeight</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;12
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Default size in pixels of the translation height
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>featureConfigurableProperties</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;'id', 'name', 'hideName', 'fill', 'outline', 'dir', 'showDir', 'connect', 'offset', 'data', 'subtype', 'quality', 'signalToNoise', 'coordinate', 'sequence', 'trace', 'gaps', 'translate', 'hide', 'counter'
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Feature configurable properties
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>featureCoodinateShow</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag use to show coordinates
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>featureHeightDefault</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;14
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Default size in pixels of the feature height
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>featureNameFont</b>
                  </div>
                  <div>
                    <span class="light">{font}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Font for the text of the features in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>featureNameFontColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;background color
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the text of the features in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>featureNameFontSize</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;8
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Size in pixels for the font size of text of the features in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>featureQualityShow</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag use to show quality
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>featureQualityValues</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag use to show values for the quality
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>featureSignalToNoiseShow</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag use to show quality
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>featureSignalToNoiseValues</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag use to show values for the quality
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>featureStaggered</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag use to stagger the features in the genome panel
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>featureTraceHeight</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;40
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Default size in pixels of the trace height
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>featureTraceTrim</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Default triming for nucleotide values in the traces (expressed in percent)
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>featureTracesShow</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag use to show traces
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>featureTranslateShow</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag use to show tranlation
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>featureTypeDefault</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;line
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Default type for the feature in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>featureWidthDefault</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;3
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Default size in pixels of the feature width
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>filterFeatureBy</b>
                  </div>
                  <div>
                    <span class="light">{filter}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Filter features by their properties used in genome browser    *
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>genomeResolution</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number to adjust the splines curvature
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>maxFeatureStringLen</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;50
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Maximum length in characters a feature label can have so anything above is truncated.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>periodTicksLabels</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;5
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of ticks to skip between values in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sequenceAColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,103,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the adenines and alanines in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sequenceBColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,0,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the degenerate C/G/T and asparagines in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sequenceCColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,0,255)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the cytosines and cysteins in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sequenceDColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,0,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the degenerate A/G/T and aspartic acids in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sequenceEColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,0,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the glutamic acids in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sequenceEndColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(255,0,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the end codon in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sequenceFColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,0,255)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the phenylalanines in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sequenceFill</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the background when showing sequnces in the box or sequence object in the Genome. The default is to use the background of the object. If specied a valid color then all the background of sequences will be uniform
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>sequenceFont</b>
                  </div>
                  <div>
                    <span class="light">{font}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Font for the text of the sequence in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sequenceFontSize</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;10
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Size in pixels for the font size of text of the sequence in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sequenceGColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,0,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the guanines and glycines in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sequenceHColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(255,0,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the degenerate A/C/T and histidines in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sequenceIColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,103,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the isoleucines in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sequenceKColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(255,0,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the degenerate G/T and lysines in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sequenceLColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,103,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the leucines in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sequenceMColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,103,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the degenerate A/G and methionines in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sequenceNColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,0,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the degenerate A/C/G/T and asparagines in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sequencePColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(255,165,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the prolines in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sequenceQColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,0,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the glutamines in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sequenceRColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(255,0,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the degenerate A/G and arginines in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sequenceSColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(255,165,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the degenerate G/C and serines in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sequenceStartColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,255,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the start codon in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sequenceTColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(255,0,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the thymidines and threonines in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sequenceUColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(255,0,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the uracils in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sequenceVColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,103,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the degenerate A/C/G and valines in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sequenceWColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,0,255)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the degenerate A/T and tryptophans in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sequenceXColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,0,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the any aminoacid code in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sequenceYColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,0,255)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the degenerate C/T and tyrosines in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>sequenceZColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(0,0,0)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the glutamines in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showFeatureNameThereshold</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;20
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Threshehold used to set te limit when there are too many features in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>subtracksMaxDefault</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;8
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Maximum number of subtracks to show in a track
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>trackConfigurableProperties</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;'name', 'hideName', 'hideFeatureNames', 'type', 'height', 'fill', 'outline', 'data', 'hide', 'connect', 'subtracksMax', 'highlight'
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Track configurable properties
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>trackNameFont</b>
                  </div>
                  <div>
                    <span class="light">{font}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Font for the text of the tracks in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>trackNameFontColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;background color
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the text of the tracks in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>trackNameFontSize</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;10
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Size in pixels for the font size of text of the tracks in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>wireColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgba(204,204,204,0.1)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the ticks in the genome browser
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Debug</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>checkGoogleChromeFrame</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to check for Google chrome frame if the browser is IE
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>codeType</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;pretty
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Output type for the JSON code
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>debug</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to turn on alerts.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>errors</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Array containing benign errors produced when rendering canvasXpress
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showCode</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to show code for the canvas.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showVersion</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to show version when mouse over top-left corner of the canvas.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Skins</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>skin</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;grey
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Skin for the application
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>skinHighlight</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the highlight skin automatically calculated
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>skinProperties</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;'skinBackgroundColor', 'skinBorderColor', 'skinColor', 'skinShadowColor'
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Properties for the skin
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>skinPropertiesBlue</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Values for the blue skin
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>skinPropertiesGrey</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;[]
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Values for the grey skin
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Events</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>broadcast</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to enable broadcasting to other canvasXpress objects in the page
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>broadcastType</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;var
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Model for broadcasting to identify either variables or a combination of variable and samples
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>configuratorWidth</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;300
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Size in pixels for the configurator.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>dataEvent</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Array to store the areas that will trigger an event
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>dataFilterWidth</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;300
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Size in pixels for the data filters.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>destroyCanvasXpressZombies</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to destroy canvasXpress objects stored in the references array when they are no longer part of the DOM. This may happen when canvasXpress is used in other JS frameworks and the objects are not destroyed by the developer
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>disableConfigurator</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to disable configurator.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>disableEvents</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to disable all events.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>dockable</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to disable docking of data table filters and configurator in the canvas
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>eventArrowKeys</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to enable arrow key binding events.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>eventKeys</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to enable key binding events. This prevent some default browser shortcuts and it is system specific. Please see the Event section bellow.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>eventPlusMinusKeys</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to enable plus / minus key binding events.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>helpKeyEvents</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to enable help on key events.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>infoTimeIn</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;3000
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Time in milliseconds to start showing info after a mouse over
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>infoTimeOut</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;3000
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Time in milliseconds to wait between updates for the mouse over info to show up
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>monitorCanvasXpressZombiesTime</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;30000
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Time in milliseconds to wait between checking for canvasXpress zombies
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>resizable</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to disable resizing the canvas by dragging the mouse over the edges
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showAdvancedConfiguration</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to show advanced configuration properties.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>this</b>
                  </div>
                  <div>
                    <span class="light">{time}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Time in milliseconds to keep track of time
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Axis Resizer</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>resizerBackgroundColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(204,204,204)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the div that shows up when resizing the axes in the canvas or the whole canvas
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>resizerBackgroundColorCurrent</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(153,187,232)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the div that shows up the current area selected in the axes in the canvas
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>resizerBackgroundColorOutlineCurrent</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;rgb(153,187,232)
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the div that shows up the current area selected in the axes in the canvas
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>resizerBackgroundImage</b>
                  </div>
                  <div>
                    <span class="light">{url}</span>&nbsp;-1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Object to store data when the canvas is zoomed with the axis resizer resizerEventData @type {object}
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>resizerDraw</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to make the axis resizers draw the canvas as they move
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>resizerPosition</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;bottom
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Position for the axis resizer in complex plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>resizerTransparency</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to make the axis resizers transparent
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>resizerType</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    String to indicate the type of axis resizer in complex plots
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>resizerWidth</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;18
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Length in pixels for the width of the visible axis resizer
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Animation</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>animationCycles</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;20
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of cycles to plot the graph for the animations.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>animationTime</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;30
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Time in milliseconds to wait between rendering the plot when showing the animation.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>animationType</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;grow
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Type of animation
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showAnimation</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to show or not animation for the graphs
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>showAnimationFont</b>
                  </div>
                  <div>
                    <span class="light">{font}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Font for the text in animations
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showAnimationFontColor</b>
                  </div>
                  <div>
                    <span class="light">{color}</span>&nbsp;background color
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Color for the animation text
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showAnimationFontSize</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;10
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Size in pixels for the font size of text involved in the animation
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>snapshotCopyChangeOnly</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to indicate whether to copy all or only the changed attributes in the network animation. This optimizes memory usage for snapshots.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Snapshots</b><caption>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>isAnimation</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to indicate if there is an active animation
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>snapshots</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Array to hold the data used in the animation
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Combination Plots</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>layout</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;1X1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Topology of the canvas. Number of rows and columns.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>layoutAdjust</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to force recalculating the ranges in the axes when multiple graphs are displayed in the canvas.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>layoutAxis</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to indicated whether to print axes values when multiple graphs are displayed in the canvas. The possible values are: 1: horizontal, 2: vertical, 3: both
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>layoutComb</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag that identify that multiple graphs will be displayed in the canvas.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>layoutCurrent</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Integer to identify the current graph being displayed in the canvas.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>layoutHeight</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Height of the current segment of the canvas when there are multiple graphs.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>layoutMaxVarLegend</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Maximum length of legend when multiple graphs are displayed in the canvas.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>layoutMulticolor</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to cycle colors when displaying multiple graps in the canvas. If set to false the color will be reseted for every graph.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>layoutWidth</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Width of the current segment of the canvas when there are multiple graphs.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>offsetX</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Additional amount to move for the X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>offsetY</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Additional amount to move for the Y axis.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>scaleX</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Scale factor for the X axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>scaleY</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Scale factor for the Y axis
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>translateX</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Amount to translate for the X axis.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>translateY</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Amount to translate for the Y axis.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>weight</b>
                  </div>
                  <div>
                    <span class="light">{float}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Fraction of the canvas to be used (a value between 0 and 1). Used when multiple graphs are displayed in one canvas. Could be an number or an array of numbers.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Images</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>dropdownButton</b>
                  </div>
                  <div>
                    <span class="light">{image}</span>&nbsp;menu_dropdown.png
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Relative path to an image file to the drop down button (not including the image directory)
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>imageDir</b>
                  </div>
                  <div>
                    <span class="light">{url}</span>&nbsp;http://canvasxpress.org/images/
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Relative path to a directory contaioning images
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>nextButton</b>
                  </div>
                  <div>
                    <span class="light">{image}</span>&nbsp;fast_forward.png
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Relative path to an image file to the next button (not including the image directory)
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>playButton</b>
                  </div>
                  <div>
                    <span class="light">{image}</span>&nbsp;play.png
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Relative path to an image file to the play button (not including the image directory)
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>previousButton</b>
                  </div>
                  <div>
                    <span class="light">{image}</span>&nbsp;rewind.png
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Relative path to an image file to the previous button (not including the image directory)
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>stopButton</b>
                  </div>
                  <div>
                    <span class="light">{image}</span>&nbsp;stop.png
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Relative path to an image file to the stop button (not including the image directory)
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Remote Procedures</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>remoteAutoPlay</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to iterate over remote data sets
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>remoteAutoPlayDelay</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;3000
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Time in milliseconds to wait between iterations over remote data sets
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>remoteDataIndex</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Index of the canvasXpress object requested
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>remoteDirection</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;next
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Direction parameter used to obtain data remotely.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>remoteIds</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Array of the remoteIds passed after a service call
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>remoteParams</b>
                  </div>
                  <div>
                    <span class="light">{object}</span>&nbsp;{}
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Object to hold parameters used to obtain data remotely. The target property will be always added to the method as well as the direction [next|prev] (see below.
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>remoteParentId</b>
                  </div>
                  <div>
                    <span class="light">{string}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Id for the parent holding the remoteWindow to prevent id collisions
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>remoteService</b>
                  </div>
                  <div>
                    <span class="light">{url}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Url used to obtain data remotely. It expects and array of canvasXpress objects
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>remoteUpdate</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to indicate that the file to get the data needs to be updated
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>remoteUpdateDelay</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;10000
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Time in milliseconds to wait between tryig to get an upated version of the file containing the data
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>remoteUpdating</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to indicate that updating data is in progress
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>remoteWindow</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;1
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of plots to show  when requesting remote data
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>


            <table class="config">

              <caption><b>Data table</b><caption>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>colWidth</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;100
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Mumber of pixels for the width of cells in the data table
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>dataTableColumnWidth</b>
                  </div>
                  <div>
                    <span class="light">{array}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Initialize general attributes, shapes, lines etc
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>dataTableTransposed</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to transpose the data in the data table
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>freezeColLeft</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of columns to freeze in the left side of the data table
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>freezeColRight</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of columns to freeze in the right side of the data table
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>freezeRowBottom</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of rows to freeze at the bottom of the data table
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>freezeRowTop</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Number of rows to freeze at the top of the data table
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>maxCols</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;8
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Maximum number of columns to display in the data table
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>maxRows</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;10
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Maximum number of rows to display in the data table
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>networkShowDataTable</b>
                  </div>
                  <div>
                    <span class="light">{option}</span>&nbsp;nodes
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Show nodes or edges on data table
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>refresehDataTableOnDraw</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;true
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to indicate to refresh data after drawing the plot
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>rowHeight</b>
                  </div>
                  <div>
                    <span class="light">{integer}</span>&nbsp;100
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Mumber of pixels for the height of cells in the data table
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showDataTable</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to indicate to show the data table
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="public">
                <td class= "first-col">
                  <div>
                    <b>showDataTableOnSelect</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;false
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Flag to indicate to show data after selecting data in the plot
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>startCol</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Starting column in the data table
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

              <tr class="private">
                <td class= "first-col">
                  <div>
                    <b>startRow</b>
                  </div>
                  <div>
                    <span class="light">{boolean}</span>&nbsp;
                  </div>
                </td>
                <td class= "sec-col">
                  <div>
                    Starting row in the data table
                  </div>
                  <div>
                    <span class="light"></span>
                  </div>
                </td>
              </tr>

            </table>

            <div class="h4">
              <h4><a name="events" id="events"><strong>events</strong></a></h4>
            </div>

            <div class="desc">
              <p>

                The parameter events is a <i>json</i> object with the
                user defined events. By default I assign the four
                events that canvasXpress supports which are mouseover,
                mouseout, click and dblclick. The events can also
                handle scope as shown below. In <i>json</i> format the
                events is like this: <br /> <br />

              </p>
            </div>

            <div class="json">
              <pre>
                {mouseover: function(o) {
                              // Do something ...
                            },
                 mouseoutr: function(o) {
                              // Do something more...
                            },
                 click: function(o) {
                           // Do something else ...
                        },
                 dblclick: function(o) {
                           // Do even more stuff
                        }
                }
              </pre>
            </div>

            <div class="desc">
              <p>

                or

              </p>
            </div>

            <div class="json">
              <pre>
                {scope: myScope,
                 handler: {mouseover: function(o) {
                                         // Do something ...
                                      },
                           click: function(o) {
                                      // Do something else ...
                                  }
                          }
                }
              </pre>
            </div>

            <div class="desc">
              <p>

                I hope it is not too complicated. The parameter (o) passed to the
                user defined callback has the same format as that one you passed
                in the data parameter. Just go ahead and mouseover and/or click
                in any element in the graphs and see what I mean. It is up to
                you to include additional code to handle the events of
                course.<br /> <br /> The default mouseover event in canvasXpress
                is to show the data value for most of the graphs or the
                feature/node/edge name for the Genome and Network graphs.<br />
                <br /> This is how the events object should look like:

              </p>
            </div>

            <div class="json">
              <pre>
                {click: function(o) {
                          DumperAlert(o);
                        }}
              </pre>
            </div>

            <div class="desc">
              <p>

                Oh, I almost forgot the event names are normalized so don't
                worry if you use IE or Firefox.

              </p>
            </div>

            <h2>Additional Methods</h2>

            <div class="desc">
              <p>

                There are a few more methods to create lines, shapes
                and text in any plot. In order, to use these methods
                you just need to save the canvasXpress in a variable
                and use the methods like this:

              </p>
            </div>

            <div class="code">
              <pre>

                 var cX = new CanvasXpress(target, data, config, events);
                 .....
                 cx.drawLine('dashed', 18, 18, 613, 613, 'rgb(255,0,0)', 2, 'butt');
                 .....
                 cx.drawShape('roundrect', 36, 36, 10, 49, 'rgb(255,0,0)', 'rgb(0,0,0)', 'closed', 3.14 / 2, '1');
                 .....
                 cx.drawText('This is kewl', 50, 50, 'Verdana, sans-serif 12pt', 'rgb(0,0,0)', 'center', 'middle', 3.14 / 4);
                 .....
              </pre>
            </div>


            <div class="h4">
              <h4><strong>drawLine</strong></h4>
            </div>

            <div class="desc">
              <p>

                It takes the following parameters:
                <b>type <i>(string)</i></b>, a valid type of line (see
                the documentation above); <b>x0 <i>(int)</i></b>,
                initial X coordinate; <b>y0 <i>(int)</i></b>, initial Y
                coordinate; <b>x1 <i>(int)</i></b>, final X coordinate;
                <b>y1 <i>(int)</i></b>, final Y coordinate;
                <b>color <i>(color)</i></b>, an rgb string of a valid
                color according to the HTML 5 canvas specification;
                <b>width <i>(int)</i></b>, the line width for the line;
                <b>cap <i>(string)</i></b>, the cap style for the line
                which could be 'butt', 'round' or 'square'.

              </p>
            </div>

            <div class="h4">
              <h4><strong>drawShape</strong></h4>
            </div>

            <div class="desc">
              <p>

                It takes the following parameters: <b>type
                <i>(string)</i></b>, a valid type of shape (see the
                documentation above); <b>x <i>(int)</i></b>, center X
                coordinate; <b>y <i>(int)</i></b>, center Y
                coordinate; <b>width <i>(int)</i></b>, width of the
                shape; <b>height <i>(int)</i></b>, height of the
                shape; <b>fill <i>(color)</i></b>, an rgb string of a
                valid color according to the HTML 5 canvas
                specification for the fill of the shape; <b>outline
                <i>(color)</i></b>, an rgb string of a valid color
                according to the HTML 5 canvas specification for the
                outline of the shape; <b>pattern <i>(string)</i></b>,
                a pattern for the shape which could be either 'closed'
                or 'open'; <b>rotation <i>(int)</i></b>, a rotation in
                degrees for the shape; <b>outline-width
                <i>(int)</i></b>, the line width for the outline of
                the shape. If the first parameter (shape) is either
                'polygon' or 'path' then the second and third
                parameter must be arrays with integers.

              </p>
            </div>

            <div class="h4">
              <h4><strong>drawText</strong></h4>
            </div>

            <div class="desc">
              <p>

                It takes the following parameters:
                <b><i>string</i></b>, the text you want to print;
                <b><i>int</i></b>, X coordinate; <b><i>int</i></b>, Y
                coordinate; <b><i>color</i></b>, an rgb string of a
                valid color according to the HTML 5 canvas
                specification; <b><i>string</i></b>, a valid align
                position according to the HTML 5 canvas specification;
                <b><i>string</i></b>, a valid baseline position
                according to the HTML 5 canvas specification;
                <b><i>float</i></b>, a rotation in radians for the
                text.

              </p>
            </div>


            <h2>Ext-JS</h2>

            <div class="desc">
              <p>

                This library can be used with <a
                href="http://www.extjs.com/" target="_blank">EXT
                JS</a>.  Actually, the Ext.canvasXpress component has
                been extended tremendously thanks to Mingyi Liu. He
                has added a large number of features for playing with
                the networks. Please go to the example and right click
                anywhere and you'll see what I mean.

              </p>
            </div>

          </div>

        </div>

        <div class="clear">&nbsp;</div>

      </div>

      <div class="footer">

        Copyright &copy; 2010 canvasXpress.org |
        <a href="mailto:imnphd@gmail.com">Isaac&nbsp;Neuhaus</a> |
        Site Powered by <a href="http://www.artician.net">Artician</a>

      </div>

    </div>

    <div style="text-indent:-9999px;">
      &nbsp;
    </div>

    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-601687-37']);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>

  </body>

</html>
